<template>
    <div class="header" :class="{'wColor':color,'newColor':newColor}" >
        <i class="cubeic-back" @click="back"></i>
        <div class="headerTitle">{{title}}</div>
        <div class="hide"></div>
    </div>
</template>

<script>
    export default {
        name : "index",
        props:{
            title:String,
            wColor: {
                type:Boolean,
                default:false
            },
            color: {
                type:Boolean,
                default:false
            },
            tBack:{
                type:Boolean,
                default : false
            },
            newColor:{
                type:Boolean,
                default: false
            },
            backUrl:String,
            ways:String
        },
        methods:{
            back(){
                if(this.tBack){
                    this.$router.push({
                        path:'/newmy'
                    })
                    return
                }
                if (this.ways){
                    this.$router.replace({
                        path:this.backUrl
                    })
                    return
                }
                if (this.backUrl){
                    this.$router.push({
                        path:this.backUrl
                    })
                }
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped lang="stylus">
    .header
        padding 0.40rem
        width 100%
        background-color #00D6C0
        display flex
        justify-content space-between
        font-size 0.48rem
        color #fff
        position fixed
        top 0
        left 0
        z-index 999
    .wColor
        background-color #fff
        color #333333
    .newColor
        background-color: #00d6c0
    .hide
        width 0.47rem
        height 0.47rem
</style>
